<template>
  <div style="padding: 50px 20%;background-color: #EFEBEBFF">
    <el-card style="height: 80vh;">
      <div slot="header" class="clearfix">
        <span>购物车</span>
      </div>

      <el-table :data="cartList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="用户ID" align="center" prop="userId" />
        <el-table-column label="商品ID" align="center" prop="goodsId" />
        <el-table-column label="店铺ID" align="center" prop="businessId" />
        <el-table-column label="数量" align="center" prop="num" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['project:cart:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['project:cart:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </el-card>
  </div>
</template>
<script>
import {delCart, getCart, listCart} from "@/api/project/cart";

export default {
  name: "cart",
  created() {
    this.getList();
  },
  data() {
    return {   // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      cartList: [],
    }
  },

  methods: {
    /** 查询地址信息列表 */
    getList() {
      listCart(this.queryParams).then(response => {
        this.cartList = response.rows;
        this.total = response.total;
      });
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCart(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改地址信息";
      });
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除地址信息编号为"' + ids + '"的数据项？').then(function () {
        return delCart(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
  }
}
</script>

<style scoped lang="scss">

</style>
